<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			人元添加
		</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/main.css" media="all">
		<script type="text/javascript" src="lib/loading/okLoading.js"></script>
		<script src="js/base.js"></script>
		<style>
			.imgs {
				display: none;
			}

			.picture {
				display: none;
			}
		</style>

	</head>
	<body>

		<div class="x-body">
			<form class="layui-form layui-form-pane" action="" id="add">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<input type="hidden" name="id" value="">
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<!--<form class="layui-form layui-form-pane" action="" id="add">-->

							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>所属小区
								</label>
								<div class="layui-input-block">
									<select name="community_id" id="community_id" lay-filter="XiaoQuChange">

									</select>
									<script>
										let url = "http://localhost:8080/wuye/XiaoQuController/selectXiaoQuAll";
										rest(url, "get", null, function(r) {
											let arr = r.data;
											let innerHTML = "";
											for (let i = 0; i < arr.length; i++) {
												innerHTML = innerHTML + " <option value=\"" + arr[i].mingcheng + "\" >" + arr[i].mingcheng +
													"</option>";
											}
											document.getElementById("community_id").innerHTML = innerHTML;
										});
									</script>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>所属房产
								</label>
								<div class="layui-input-block">
									<select name="home_id" id="home_id">

										<option value="0">顶级栏目</option>

									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>成员名称
								</label>
								<div class="layui-input-block">
									<input type="text" name="member_name" id="mingcheng" autocomplete="off"
										placeholder="输入成员名称" class="layui-input" lay-verify="required"
										lay-reqtext="成员名称是必填项，岂能为空？" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>身份证号
								</label>
								<div class="layui-input-block">
									<input type="text" name="sfzmhm" id="shenfenzhenghao" autocomplete="off"
										placeholder="请输入身份证号码" class="layui-input" maxlength="18" lay-verify="identity"
										value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>出生日期
								</label>

								<div class="layui-input-inline">
									<input class="layui-input" name="birthday" " placeholder=" 出生日期"
										id="LAY_demorange_s" value="">

								</div>

							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>联系方式
								</label>
								<div class="layui-input-block">
									<input type="text" name="phone" id="lianxifangshi" autocomplete="off" placeholder=""
										class="layui-input" maxlength="11" lay-verify="required|phone" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>职业
								</label>
								<div class="layui-input-block">
									<input type="text" name="occupation" id="zhiye" autocomplete="off" placeholder=""
										class="layui-input" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>性别
								</label>
								<div class="layui-input-block">
									<input type="radio" name="sex" value="1" title="男" checked="checked">
									<div class="layui-unselect layui-form-radio layui-form-radioed"><i
											class="layui-anim layui-icon layui-anim-scaleSpring"></i>
										<div>男</div>
									</div>
									<input type="radio" name="sex" value="0" title="女">
									<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
										<div>女</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>成员类型
								</label>
								<div class="layui-input-block">
									<input type="radio" name="personnel_type" value="1" title="业主" checked="checked">
									<div class="layui-unselect layui-form-radio layui-form-radioed"><i
											class="layui-anim layui-icon layui-anim-scaleSpring"></i>
										<div>业主</div>
									</div>
									<input type="radio" name="personnel_type" value="2" title="家庭成员">
									<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
										<div>家庭成员</div>
									</div>
									<input type="radio" name="personnel_type" value="3" title="租户">
									<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
										<div>租户</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label for="link" class="layui-form-label">
									<span class="x-red">*</span>小区缩略图
								</label>
								<div class="layui-input-inline">
									<div class="site-demo-upbar">
										<div class=" layui-upload-button" style="border:#FFFFFF ;">
											<button type="button" class="layui-btn" id="test1">
												<i class="layui-icon">&#xe67c;</i>上传图片
											</button>
											<input class="layui-upload" type="file" accept="undefined" id="previewImg"
												name="images" onchange="upload(this,)">
										</div>

									</div>
								</div>

								<!--<a href="javascript:;" style="" class="layui-btn " id="cancel"><i class="layui-icon">ဂ</i>撤销上传</a>-->
							</div>
							<div class="layui-form-item">
								<label for="link" class="layui-form-label">
									<span class="x-red">*</span>缩略图展示
								</label>
								<div>
									<img src="" id="showImage" name="pimages" style="width: 400px;height: 200px;" />
								</div>
							</div>

							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">
									<span class='x-red'>*</span>描述
								</label>
								<div class="layui-input-block">
									<textarea placeholder="请输入内容" id="miaoshu" name="desc"
										class="layui-textarea"></textarea>
								</div>
							</div>

							<div class="layui-form-item">
								<button class="layui-btn" type="button" lay-filter="add" lay-submit="">
									保存
								</button>
							</div>
							<!--</form>-->
							<div style="height:100px;"></div>
						</div>



					</div>

				</div>
			</form>
		</div>
		<script src="lib/layui/layui.js" charset="utf-8"></script>
		<script src="js/x-layui.js" charset="utf-8"></script>

		<script>
			layui.use(['laydate', 'element', 'layer', 'form'], function() {
				$ = layui.jquery; //jquery
				lement = layui.element(); //面包导航
				layer = layui.layer; //弹出层
				form = layui.form();
				laydate = layui.laydate; //日期插件
				okLoading.close($);
				form.render();
				var start = {
					min: '1900-01-01 00:00:00',
					max: '2099-06-16 23:59:59',
					istoday: false,
					choose: function(datas) {
						//end.min = datas; //开始日选好后，重置结束日的最小日期
						//end.start = datas //将结束日的初始值设定为开始日
					}
				};
				document.getElementById('LAY_demorange_s').onclick = function() {
					start.elem = this;
					laydate(start);
				};
				//图片上传接口
				/*layui.upload({
				  url: './upload.json' //上传接口
				  ,success: function(res){ //上传成功后的回调
				      console.log(res);
				    $('#LAY_demo_upload').attr('src',res.url);
				  }
				});*/


				//监听提交
				form.on('submit(add)', function(data) {
					let suoshuxiaoqu = document.getElementById("community_id").value;
					let fangchan = document.getElementById("home_id").value;
					let mingcheng = document.getElementById("mingcheng").value;
					let shenfenzhenghao = document.getElementById("shenfenzhenghao").value;
					let chushengriqi = document.getElementById("LAY_demorange_s").value;
					let lianxifangshi = document.getElementById("lianxifangshi").value;
					let zhiye = document.getElementById("zhiye").value;
					let miaoshu = document.getElementById("miaoshu").value;
					let icon = fileName;

					let xingbie = document.getElementsByName("sex");
					let sex = 0;
					if (xingbie[0].checked) {
						sex = 0;
					} else {
						sex = 1;
					}

					let type = document.getElementsByName("personnel_type");
					let personnel_type = 0;
					if (type[0].checked) {
						personnel_type = 0;
					} else if (type[1].checked) {
						personnel_type = 1;
					} else {
						personnel_type = 2;
					}
					let url = "http://localhost:8080/wuye/RenYuanController/add";
					let method = "post";
					let json = {};
					json.suoshuxiaoqu = suoshuxiaoqu;
					json.fangchan = fangchan;
					json.mingcheng = mingcheng;
					json.shenfenzhenghao = shenfenzhenghao;
					json.chushengriqi = chushengriqi;
					json.lianxifangshi = lianxifangshi;
					json.zhiye = zhiye;
					json.miaoshu = miaoshu;
					json.xingbie = sex;
					json.chengyuanleixing = personnel_type;
					json.icon = icon;

					rest(url, method, json, function(r) {
						if (r.code == 200) {
							//添加成功
							layer.msg("添加成功", {
								icon: 6,
								time: 2000
							}, function() {
								window.parent.location.reload();
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							});
						} else {
							layer.msg("添加失败", {
								icon: 5,
								time: 2000
							});
							return false;
						}
					});
					return false;
				});

				form.on('select(XiaoQuChange)', function(data) {
					let XiaoQuchange = document.getElementById("community_id");
					var communityName = XiaoQuchange.value; // 获取选中的小区名字  

					communidy(communityName); // 根据小区名字获取栋数数据    
				});

				function communidy(communityName) {
					// 根据小区名字获取栋数数据
					let url = "http://localhost:8080/wuye/FangChanController/findFangChanByXiaoQuName";
					let json = {};
					json.communityName = communityName;
					rest(url, "post", json, function(r) {

						let arr = r.data;
						let innerHTML = "";
						for (let i = 0; i < arr.length; i++) {
							innerHTML = innerHTML + " <option value=\"" + arr[i].fangchanmingcheng + "\" >" +
								arr[i].fangchanmingcheng + "</option>";
						}
						document.getElementById("home_id").innerHTML = innerHTML;


						layui.form().render('select', {
							elem: '#home_id'
						});
					});
				}

			})
		</script>
		<!--栏目缩略图上传-->
		<script>
			let fileName = null;

			function upload(obj, id) {

				layer.msg('图片上传中', {
					icon: 16
				});
				let file = $('#previewImg')[0].files[0];
				let srcValue = window.URL.createObjectURL(file);
				document.getElementById("showImage").src = srcValue;
				let url = "http://localhost:8080/wuye/RenYuanController/uploadIcon";
				let method = "post";
				let json = {};
				json.userId = id;

				let reader = new FileReader();
				reader.onload = function() {
					json.base64 = this.result;
					json.base64 = json.base64.substring(json.base64.indexOf(",") + 1);
					rest(url, method, json, function(r) {
						// alert(r.data);
						fileName = r.data;
					});
				};
				reader.readAsDataURL(file);
			}
		</script>

	</body>
</html>